<script setup lang="ts">
import { downFile } from '@/utils/designUtil.js'
import { useEditor } from '@/views/Editor/app'
import { Notification } from '@arco-design/web-vue'
import { v4 as uuidv4 } from 'uuid'

const {
  editor,
  keybinding,
} = useEditor()

const visiblePreview = ref(false)
const previewUrl = ref()
const exportFileTypes = reactive([
  {
    value: 'jpg',
    label: 'JPG',
  },
  {
    value: 'png',
    label: 'PNG',
  },
  {
    value: 'webp',
    label: 'WEBP',
  },
])
const scQtaRate = reactive([
  {
    value: 1,
    label: '正常',
  },
  {
    value: 0.7,
    label: '0.7倍',
  },
  {
    value: 0.5,
    label: '0.5倍',
  },
  {
    value: 0.3,
    label: '0.3倍',
  },
  {
    value: 0.1,
    label: '0.1倍',
  },
])
const exportVisible = ref(false)
const exportForm = ref({
  fileType: 'jpg',
  quality: 1,
  scale: 1,
  pixelRatio: 1,
  trim: false,
})
const rules = {}
function resetForm() {
  exportForm.value = {
    fileType: 'jpg',
    quality: 1,
    scale: 1,
    pixelRatio: 1,
    trim: false,
  }
}
async function preview() {
  const result = await editor.contentFrame.export('png', { blob: true })
  const url = URL.createObjectURL(result.data)
  previewUrl.value = url
  visiblePreview.value = true
}
function save() {
  Notification.info({
    closable: true,
    content: '请到控制台查看打印的JSON值',
  })
  console.log('多页面JSON：', editor.getPages())
  editor.getCurrentPage()
  console.log('editor>>>>', editor)
  let json = editor.contentFrame.toJSON()
  console.log('当前页JSON：', json)
}

function handleDownload() {
  resetForm()
  exportVisible.value = true
}

function handleExport() {
  let fileName = uuidv4()
  editor.contentFrame.export(`${fileName}.${exportForm.value.fileType}`, exportForm.value)
}

function handleSelect(v) {
  let fileName = uuidv4()
  switch (v) {
    case 'png':
      editor.contentFrame.export(`${fileName}.png`)
      break
    case 'jpg':
      editor.contentFrame.export(`${fileName}.jpg`)
      break
    case 'webp':
      editor.contentFrame.export(`${fileName}.webp`)
      break
    case 'json':
      saveJson()
      break
    default:
      editor.contentFrame.export(`${fileName}.jpg`)
      break
  }
}
function saveJson() {
  const dataUrl = editor.contentFrame.toJSON()
  const fileStr = `data:text/json;charset=utf-8,${encodeURIComponent(
    JSON.stringify(dataUrl, null, '\t'),
  )}`
  downFile(fileStr, `${uuidv4()}.json`)
}
</script>

<template>
  <ASpace>
    <ADivider direction="vertical" />

    <AButton @click="preview()">
      <template #icon>
        <IconEye />
      </template>
      预览
    </AButton>
    <AButton
      type="primary"
      @click="save()"
    >
      <template #icon>
        <IconSave />
      </template>
      保存
    </AButton>
    <ADropdownButton
      type="primary"
      @select="handleSelect"
      @click="handleDownload()"
    >
      <IconDownload class="m-r-8px" />下载作品
      <template #icon>
        <IconDown />
      </template>
      <template #content>
        <ADoption value="json">
          另存为JSON
        </ADoption>
      </template>
    </ADropdownButton>
  </ASpace>
  <AImagePreview
    v-model:visible="visiblePreview"
    :src="previewUrl"
  />
  <AModal
    v-model:visible="exportVisible"
    title="下载作品"
    width="600px"
    :top="50"
    :align-center="false"
    @ok="handleExport()"
  >
    <AForm
      ref="formRef"
      :model="exportForm"
      :rules="rules"
    >
      <AFormItem
        field="fileType"
        label="导出文件类型"
      >
        <ARadioGroup
          v-model="exportForm.fileType"
          type="button"
          :options="exportFileTypes"
        />
      </AFormItem>
      <AFormItem
        v-if="['jpg', 'webp'].includes(exportForm.fileType)"
        field="quality"
        label="图片质量"
      >
        <ASpace>
          <ARadioGroup
            v-model="exportForm.quality"
            type="button"
            :options="scQtaRate"
          />
          <AInputNumber
            v-model="exportForm.quality"
            mode="button"
            style="width: 120px"
            :max="1"
            :step="0.1"
            :min="0.1"
            placeholder="1"
          />
        </ASpace>
      </AFormItem>
      <AFormItem
        field="scale"
        label="缩放比例"
        extra="可用于生成小尺寸的缩略图"
      >
        <ASpace>
          <ARadioGroup
            v-model="exportForm.scale"
            type="button"
            :options="scQtaRate"
          />
          <AInputNumber
            v-model="exportForm.scale"
            mode="button"
            style="width: 120px"
            :max="1"
            :step="0.1"
            :min="0.1"
            placeholder="1"
          />
        </ASpace>
      </AFormItem>
      <AFormItem
        field="pixelRatio"
        label="像素比"
        extra="可导出适配高清屏的2倍图、3倍图"
      >
        <AInputNumber
          v-model="exportForm.pixelRatio"
          allow-clear
          hide-button
          style="width: 200px"
          placeholder="默认为1倍图"
        >
          <template #suffix>
            倍
          </template>
        </AInputNumber>
      </AFormItem>
      <AFormItem
        field="trim"
        label="裁剪透明像素"
      >
        <ASwitch
          v-model="exportForm.trim"
          type="round"
        >
          <template #checked>
            是
          </template>
          <template #unchecked>
            否
          </template>
        </ASwitch>
      </AFormItem>
    </AForm>
  </AModal>
</template>

<style scoped>

</style>
